<template>
  <div class="root">
    <div class="wai">
      <el-table
        :data="tableData"
        style="
          --el-color-white: transparent;
          --el-text-color-regular: azure;
          --el-text-color-secondary: #909399;
          --el-background-color-base: transparent;
        "
      >
        <el-table-column prop="majno" label="专业号" />
        <el-table-column prop="majname" label="专业名" />
        <el-table-column prop="serno" label="系号" />
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        style="
          --el-color-white: transparent;
          --el-text-color-primary: azure;
          --el-text-color-regular: azure;
          --el-color-primary: #f56c6c;
          margin-top: 50px;
        "
        layout="prev, pager, next, jumper"
        :total="(this.data.length * 10) / 5"
        @current-change="handlePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      curpage: 1,
      tableData: [],
      data: [],
    };
  },
  created() {
    axios.get("http://localhost:8082/major").then((res) => {
      this.data = res.data;
      console.log(this.data);
      this.tableData = this.data.slice(0, 5);
    });
  },
  methods: {
    handlePage(cur) {
      this.tableData = this.data.slice((cur - 1) * 5, cur * 5);
    },
  },
};
</script>

<style scoped>
.wai {
  width: 60%;
  margin: 30px auto;
  border: 1px solid azure;
}
</style>